import classnames from 'classnames'

import Icon from '@/components/Icon'
import styles from './index.module.scss'
import { useDispatch, useSelector } from 'react-redux'
import { RootState } from '@/types/store'
import { differenceBy } from 'lodash'
import {
  addChannel,
  removeChannel,
  setActiveChannel
} from '@/store/actions/home'
import { useMemo, useState } from 'react'
import { Toast } from 'antd-mobile'

type ChannelsProps = {
  onClose?: () => void
}

const Channels = ({ onClose }: ChannelsProps) => {
  const dispatch = useDispatch()
  // 频道数据
  const { userChannels, allChannels, activeChannelId } = useSelector(
    (state: RootState) => state.home
  )

  // 编辑状态
  const [isEdit, setIsEdit] = useState(false)

  // const recommendChannels = useSelector((state: RootState) => {
  //   const { userChannels, allChannels } = state.home

  //   // 从所有频道中过滤用户已选的频道
  //   // return allChannels.filter((item) => {
  //   //   const i = userChannels.findIndex((x) => x.id === item.id)
  //   //   // console.log(i)
  //   //   return i === -1
  //   // })
  //   // 使用lodash优化代码
  //   return differenceBy(allChannels, userChannels, 'id')
  // })
  // 使用useMemo进行性能优化，但是注意：如果不是测试和运维需求，就不要优化
  const recommendChannels = useMemo(() => {
    return differenceBy(allChannels, userChannels, 'id')
  }, [allChannels, userChannels])

  // 频道点击
  const changeActiveChannel = (id: number) => {
    dispatch(setActiveChannel(id))

    onClose?.()
  }

  return (
    <div className={styles.root}>
      <div className="channel-header">
        <Icon name="iconbtn_channel_close" onClick={onClose} />
      </div>
      <div className="channel-content">
        {/* 编辑时，添加类名 edit */}
        <div className={classnames('channel-item', { edit: isEdit })}>
          <div className="channel-item-header">
            <span className="channel-item-title">我的频道</span>
            <span className="channel-item-title-extra">
              {isEdit ? '点击删除频道' : '点击进入频道'}
            </span>
            <span
              className="channel-item-edit"
              onClick={() => {
                setIsEdit(!isEdit)
              }}
            >
              {isEdit ? '完成' : '编辑'}
            </span>
          </div>
          <div className="channel-list">
            {/* 选中时，添加类名 selected */}
            {userChannels.map((item) => (
              <span
                className={classnames('channel-list-item', {
                  selected: activeChannelId === item.id
                })}
                key={item.id}
                onClick={() => {
                  if (!isEdit) {
                    changeActiveChannel(item.id)
                  }
                }}
              >
                {item.name}
                <Icon
                  channel={item.name}
                  name="iconbtn_tag_close"
                  onClick={() => {
                    if (isEdit) {
                      if (userChannels.length <= 4) {
                        return Toast.show({
                          content: '至少保留4个频道'
                        })
                      }

                      dispatch(removeChannel(item.id))

                      if (item.id === activeChannelId) {
                        const newActiveId = userChannels[0].id
                        dispatch(setActiveChannel(newActiveId))
                      }
                    }
                  }}
                />
              </span>
            ))}
          </div>
        </div>

        <div className="channel-item">
          <div className="channel-item-header">
            <span className="channel-item-title">频道推荐</span>
            <span className="channel-item-title-extra">点击添加频道</span>
          </div>
          <div className="channel-list">
            {recommendChannels.map((item) => (
              <span
                key={item.id}
                className="channel-list-item"
                onClick={() => {
                  dispatch(addChannel(item))
                }}
              >
                +{item.name}
              </span>
            ))}
          </div>
        </div>
      </div>
    </div>
  )
}

export default Channels
